<template>
  <div id="HelloWorld">
    <textarea cols="30" rows="10" v-model="msg"></textarea>
    <button @click="sendMsg">发送</button>

    <ul>
      <li v-for="(item,index) in msgLists" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      names: [],
      msg:'',//发送信息
      webID:1,
      userID:1,
      toUserID:1,
      msgLists:[],//信息
      Authentication:'O4pH7suKVx2T9eDK6iN77pWj58nLxBJH',
      apiUrl :"http://im.fengpintech.com/"

    }
  },
  methods:{
    //发送信息
    sendMsg(){
      let _this = this;
      $.ajax({
          url:_this.apiUrl+'/api/sendMsg',
          type:'post',
          data:{ 
            from_id: _this.userID, 
            to_id: _this.toUserID, 
            content: _this.msg, 
            user_identity_id: 1,
            content_type: 1,
          },
          headers:{Authentication:_this.Authentication},
          success:(res)=>{
            if(res.status == 200){
              _this.msg = '';
            }
            //console.log(res);
          },
          error:(err)=>{
            console.log(err);
          }
      })
    }
  },
  mounted() {      
      // 创建 Echo 监听
      let that = this;
      let current_user_channel = 'chat-one:' + this.webID  + ':' + this.userID;
      // 12. 创建 Echo 监听
      Echo.channel(current_user_channel)
          .listen('Chat', (e) => {
            console.log(e);
            that.msgLists.push(e.msg.content);
          });
  },
  created(){
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
